<script lang="ts" setup>
  import { getDeviceModels, addDevice } from '@/api-new/devices';
  import { useForm } from '@/hooks/arco/useForm';
  import { useModeModalBinder } from '@/hooks/arco/useModeModalBinder';
  import { useSelectOption } from '@/hooks/arco/useSelectOption';
  import { Message } from '@arco-design/web-vue';

  const props = defineProps({
    deviceType: Number,
  });

  const form = useForm({
    state: {
      modelId: '',
      deviceCode: '',
    },
  });

  const modelSelect = useSelectOption({
    name: '设备型号',
    apiFun: getDeviceModels,
    fieldNames: {
      value: 'modelId',
      label: 'modelName',
    },
    transformDataFun(data: any[]) {
      return data.filter((e) => {
        return e.deviceType === props.deviceType;
      });
    },
  });

  const modal = useModeModalBinder({
    modes: ['add', 'edit'] as const,
    async onOkClick() {
      await form.validate();
      return addDevice(form.state).then((res) => {
        Message.success('添加成功！');
      });
    },
  });

  defineExpose(modal.expose);
</script>

<template>
  <a-modal width="600px" v-bind="modal.bindProps">
    <a-form v-bind="form.bindProps" layout="vertical">
      <a-form-item field="modelId" label="设备型号" required>
        <a-select v-model="form.state.modelId" v-bind="modelSelect.bindProps" />
      </a-form-item>
      <a-form-item field="deviceCode" label="设备编码" required>
        <a-input v-model="form.state.deviceCode" placeholder="请输入设备编码" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<style scoped>
  .mb-4 {
    margin-bottom: 1rem;
  }
</style>
